<template>
  <div class="address-bg">
      <div class="address">
          <van-address-edit :area-list="areaList"
          show-set-default show-search-result :search-result="searchResult"
          :area-columns-placeholder="['请选择','请选择','请选择']" @save="saveClick"
          @change-detail="onChangeDetail"/>
      </div>
  </div>
</template>

<script>
import{mapGetters,mapState} from 'vuex'
import{areaList} from '@vant/area-data'
export default {
  props: {
  },
  components: {
  },
  data() {
    return {
        areaList,
        searchResult:[]
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
      saveClick(content){
          let area=content.province+'-'+content.city+'-'+content.county
          let form={
              name:content.name,
              tel:content.tel,
              area:area,
              detail:content.addressDetail
          }
          this.$http.post('/api/address/add',form)
          this.$router.push({name:address})
      },
      onChangeDetail(val){
          if(val){
              this.searchResult=[{
                  name:'黄龙万科中心',
                  address:'杭州西湖区'
              }]
          }else{
              this.searchResult=[]
          }
      }
  },
};
</script>
<style scoped lang="less">
.address{
    margin-top: 150px;
    .address-bg{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgb(247,248,250);
    }
}
</style>